<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>上架商品列表</title>

    <!-- 第一：下载 Layui 框架，并拷贝到项目中 -->
    <!-- 第二：导入 Layui 提供的 CSS 样式 -->
    <link href="layui/css/layui.css" rel="stylesheet">

</head>
<body>
    <!-- 第四：页面设计 - 参考 Layui 文档 - 结构化页面 + 预设样式（CV） -->

    <!-- 查询表单 -->
    <form class="layui-form">
        <div class="layui-inline">

            <div class="layui-input-inline layui-input-wrap">
                <input type="text" id="search_productName" name="product_name" lay-verify="required" autocomplete="off" placeholder="请输入商品名称" lay-affix="clear" class="layui-input">
            </div>

            <div class="layui-input-inline">
                <select id="search_product_type" name="product_type" lay-filter="product_type">
                    <option value="" selected>商品类型</option>
                </select>
            </div>

            <div class="layui-input-inline">
                <button type="button" id="selectBtn" class="layui-btn layui-btn-primary">查询</button>
            </div>
        </div>
    </form>

    <!-- 数据表格 - 动态表格 - servlet - dao -->
    <table class="layui-table"
           id="test"
           lay-filter="test"
           style="width: 98%;">


    </table>

    <!-- 定义表格操作按钮 -->
    <script type="text/html" id="barDemo">
        <!-- 在动态表格中，内置一个对象d，表示当前行数据 -->
        <div class="layui-clear-space">

            {{#  if(d.productStatus==1){ }}
                <a class="layui-btn layui-bg-red layui-btn-xs"
                   lay-event="down">下架</a>
            {{#  } }}

            {{#  if(d.productStatus==0){ }}
            <a class="layui-btn layui-bg-orange layui-btn-xs"
               lay-event="up">上架</a>
            {{#  } }}

            <a class="layui-btn layui-bg-blue layui-btn-xs" lay-event="edit">修改</a>
            <a class="layui-btn layui-btn-xs" lay-event="detail">查看详情</a>
        </div>
    </script>

    <!-- 设置模板内容：通过复选框来显示商品上架状态 -->
    <script type="text/html" id="status-switch">
        <!-- d 表示当前行 -->
        <input type="checkbox" name="status"
               value="{{= d.productId }}"
               title="上架|下架" lay-skin="switch"
               lay-filter="demo-templet-status"
               {{= d.productStatus=="1"?"checked":"" }}>
    </script>

    <!-- 修改商品表单 -->
    <div id="updateContainer" style="display: none">
        <form class="layui-form" id="updateForm" lay-filter="example" style="margin: 1rem">

            <div class="layui-form-item">
                <label class="layui-form-label">商品编号</label>
                <div class="layui-input-block">
                    <input type="text" id="update-productId" name="productId"
                           autocomplete="off" class="layui-input" />
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">商品名称</label>
                <div class="layui-input-block">
                    <input type="text" id="update-productName" name="productName"
                           autocomplete="off" class="layui-input" />
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">商品类型</label>
                <div class="layui-input-block">
                    <select name="productType" id="update-type" lay-filter="type" lay-search="">
                        <option value="">请选择类型</option>
                    </select>
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">商品价格</label>
                <div class="layui-input-block">
                    <input type="text" id="update-productPrice" name="productPrice"
                           autocomplete="off" class="layui-input" />
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">状态</label>
                <div class="layui-input-block">
                    <input type="radio" id="update-productStatus1" name="productStatus"
                           value="1" title="上架" checked>
                    <input type="radio" id="update-productStatus2" name="productStatus"
                           value="0" title="下架">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">描述</label>
                <div class="layui-input-block">
                    <textarea id="update-productDesc"
                        name="productDesc"
                        placeholder="请输入内容"
                        class="layui-textarea">
                    </textarea>
                </div>
            </div>
        </form>
    </div>



    <!-- 第三：导入 Layui 提供的 js 脚本文件 -->
    <script src="layui/layui.js"></script>

    <!-- 动态表格：渲染商品信息（分页 + 条件查询） -->
    <script src="js/table_on.js"></script>

</body>
</html>